(function() {  
	var avatarCropArr = {};
	var albumCropArr = {};
	
	// getElementById
	function $id(id) {
		return document.getElementById(id);
	}
	
	// file selection
	function FileSelectHandler(e) {
		// fetch FileList object
		var files = e.target.files || e.dataTransfer.files;
		var id = e.currentTarget.getAttribute('id');
		
		// process all File objects
		for (var i = 0, f; f = files[i]; i++) {
			//if (i == 8 && id == 'file_album') break;
			ParseFile(f, id);
			UploadFile(f, id);
		}
		
		if(id != 'banner_large' && id != 'banner_small_1' && id != 'banner_small_2' && id != 'logo' && id != 'avatar') {
			 alert('Chọn vùng tương ứng để up ảnh.');
			 
			 if (id == 'avatar-add' || id == 'avatar-edit') { 
			    var xsize = 224, ysize = 155, jcrop_api_avatar;
			    
			    jQuery('.target_'+id).each(function() {
			      image_to_crop_avatar = $(this);
			      image_to_crop_avatar.Jcrop({
			        //aspectRatio: xsize / ysize,
			        setSelect: [ 0, 0, xsize, ysize ],
			        //minSize: [ xsize/2, ysize/2 ],
			        //maxSize: [ xsize*2, ysize*2 ],
			        onSelect: function(coords){
			          avatarCropArr[image_to_crop_avatar.attr('id')] = coords;
			   	      $('#'+id+'CropJson').val($.toJSON(avatarCropArr));
			      	}
			      },function(){
			    	  jcrop_api_avatar = this;
			    	  jcrop_api_avatar.animateTo([0,0,xsize,ysize]);
			      });
			    });
		    } else if ( id == 'album-add' || id == 'album-edit') {
			    var xsize = 626, ysize = 379, jcrop_api_album;
			    
			    jQuery('.target_'+id).each(function() {
			      image_to_crop_avatar = $(this);
			      image_to_crop_avatar.Jcrop({
			        //aspectRatio: xsize / ysize,
			        setSelect: [ 0, 0, xsize, ysize ],
			        //minSize: [ xsize/2, ysize/2 ],
			        //maxSize: [ xsize*2, ysize*2 ],
			        onSelect: function(coords){
			    	  albumCropArr[image_to_crop_avatar.attr('id')] = coords;
			   	      $('#'+id+'CropJson').val($.toJSON(albumCropArr));
			      	}
			      },function(){
			    	  jcrop_api_avatar = this;
			    	  jcrop_api_avatar.animateTo([0,0,xsize,ysize]);
			      });
			    });
		    }
		}
		
	}

	// output file information
	function ParseFile(file, id) {
		var imgElement = $id(id + "_append");
		// display an image
		if (file.type.indexOf("image") == 0) {
			var reader = new FileReader();
			reader.onload = function(e) {
				var msg = '<img class="target_'+id+'" id="' + file.name + '" src="' + e.target.result + '" />';
				if(id != 'banner_large' && id != 'banner_small_1' && id != 'banner_small_2' && id != 'logo' && id != 'avatar') {
					imgElement.innerHTML = msg + imgElement.innerHTML;
				} else {
					imgElement.innerHTML = msg;
				}
			};
			reader.readAsDataURL(file);
		}
	}


	// upload JPEG files
	function UploadFile(file, id) {
		var xhr = new XMLHttpRequest();
		if (xhr.upload && file.type == "image/jpeg" && file.size <= 600000) {

			// start upload
			xhr.open("POST", $id(id + "_form").action, true);

			xhr.setRequestHeader("X_FILENAME", file.name);
			xhr.send(file);
		}
	}

	// call initialization file
	if (window.File && window.FileList && window.FileReader) {
		var banner_large = $id("banner_large");
		var banner_small_1 = $id("banner_small_1");
		var banner_small_2 = $id("banner_small_2");
		var logo = $id("logo");
		var avatar = $id("avatar");
		
		var avatar_add = $id("avatar-add");
		var album_add = $id("album-add");
		var avatar_edit = $id("avatar-edit");
		var album_edit = $id("album-edit");
		
		// file select
		banner_large.addEventListener("change", FileSelectHandler, false);
		banner_small_1.addEventListener("change", FileSelectHandler, false);
		banner_small_2.addEventListener("change", FileSelectHandler, false);
		logo.addEventListener("change", FileSelectHandler, false);
		avatar.addEventListener("change", FileSelectHandler, false);
		
		avatar_add.addEventListener("change", FileSelectHandler, false);
		album_add.addEventListener("change", FileSelectHandler, false);
		avatar_edit.addEventListener("change", FileSelectHandler, false);
		album_edit.addEventListener("change", FileSelectHandler, false);

		// is XHR2 available?
		var xhr = new XMLHttpRequest();
		if (xhr.upload) {
			// remove submit button
			$(".submit_btn").css("display", "none");
		}
	}
})();